<template>
	<view>
		<uni-nav-bar dark :fixed="true" shadow bgimage="linear-gradient(to right, #4facfe 0%, #00f2fe 100%)" status-bar
			title="我的" @clickLeft="back" />
		<view class="uni-nav-bar-empty-v"></view>
		<view slot="gBody" class="grace-body">
			<view class="userInforv">
				<image src="https://shangtu.obs.cn-north-4.myhuaweicloud.com/img/xiaoleng.png"
					style="width: 110rpx;height: 110rpx;border-radius: 10rpx;"></image>
				<view class="contentv">
					<view style="font-size: 34rpx;color: #2c2c2c;">方圆百里</view>
					<view>
						<image src="https://shangtu.obs.cn-north-4.myhuaweicloud.com/img/%E9%92%BB%E7%9F%B3.png"
							style="width: 30rpx;height: 30rpx;"></image>
					</view>

				</view>
			</view>
<!-- 			<view class="ucenter-line"></view>
			<view>
				<graceBoxBanner :items="items"></graceBoxBanner>
			</view> -->
			<view class="ucenter-line"></view>
			<view class="grace-list grace-margin-top">
				<view class="grace-list-items"  @click="toCaht">
					<text class="grace-list-icon grace-icons icon-friend grace-blue"></text>
					<view class="grace-list-body grace-border-b">
						<view class="grace-list-title">
							<text class="grace-list-title-text">消息</text>
							<text class="grace-badge grace-bg-red" v-if="messageSize != null && messageSize != 0">{{messageSize}}</text>
						</view>
					</view>
					<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
				</view>
				<view class="grace-list-items" @click="toOrder">
					<text class="grace-list-icon grace-icons icon-article grace-blue-sky"></text>
					<view class="grace-list-body grace-border-b">
						<view class="grace-list-title">
							<text class="grace-list-title-text">订单</text>
						</view>
					</view>
					<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
				</view>
				<view class="grace-list-items" @click="toFocus">
					<text class="grace-list-icon grace-icons icon-wallet grace-green"></text>
					<view class="grace-list-body grace-border-b">
						<view class="grace-list-title">
							<text class="grace-list-title-text">关注</text>
						</view>
					</view>
					<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
				</view>
				<view class="grace-list-items" @click="toCollect">
					<text class="grace-list-icon grace-icons icon-article grace-blue-sky"></text>
					<view class="grace-list-body grace-border-b">
						<view class="grace-list-title">
							<text class="grace-list-title-text">收藏</text>
						</view>
					</view>
					<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
				</view>
				<view class="grace-list-items" @click="toDress">
					<text class="grace-list-icon grace-icons icon-user grace-red"></text>
					<view class="grace-list-body">
						<view class="grace-list-title">
							<text class="grace-list-title-text">穿搭</text>
						</view>
					</view>
					<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
				</view>
			</view>
			<view class="ucenter-line"></view>
			<view class="grace-list grace-margin-top">				
				<view class="grace-list-items" @click="toMerchant">
					<text class="grace-list-icon grace-icons icon-set grace-yellow"></text>
					<view class="grace-list-body grace-border-b">
						<view class="grace-list-title">
							<text class="grace-list-title-text">我的店铺</text>
						</view>
					</view>
					<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
				</view>
				<view class="grace-list-items" @click="toMerchantJoin">
					<text class="grace-list-icon grace-icons icon-user grace-red"></text>
					<view class="grace-list-body grace-border-b">
						<view class="grace-list-title">
							<text class="grace-list-title-text">商家入驻</text>
						</view>
					</view>
					<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
				</view>
				<view class="grace-list-items" @click="toMyAddress">
					<text class="grace-list-icon grace-icons icon-phone grace-red"></text>
					<view class="grace-list-body grace-border-b">
						<view class="grace-list-title">
							<text class="grace-list-title-text">我的地址</text>
						</view>
					</view>
					<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
				</view>
				<view class="grace-list-items">
					<text class="grace-list-icon grace-icons icon-phone grace-red"></text>
					<view class="grace-list-body">
						<view class="grace-list-title">
							<text class="grace-list-title-text">我的建议</text>
						</view>
					</view>
					<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
				</view>
			</view>
		</view>
		<view style="height: 200rpx;"></view>
		<tabBar :pageIndex="2" :textType="1" @toTab="toTab"></tabBar>
	</view>
</template>

<script>
	import tabBar from '@/components/tabBar/tabBar.vue';
	import graceBoxBanner from "../../graceUI/components/graceBoxBanner.vue";
	export default {
		components: {
			tabBar,
			graceBoxBanner
		},
		data() {
			return {
				messageSize:null,
				items: [
					[199, '', '余额'],
					[500, '', '优惠卷'],
					[50, '', '私信'],
					[12, '', '商品']
				]
			}
		},
		onShow() {
			this.$wsService.connect(getApp().globalData.userInfo.userId);
			const iMMsgs = uni.getStorageSync('IMMsgs');
			this.messageSize = iMMsgs.filter(item => item.content != '' && item.satus == 0).length; // 未读信息
		},
		methods: {
			// 点击切换页面事件
			toTab(data) {
				console.log(data);
				uni.switchTab({
					url: data.pageUrl
				});
			},

			toMerchant() {
				console.log(getApp().globalData.userInfo.merchantIds)
				if (getApp().globalData.userInfo.merchantIds[0]) {
					uni.navigateTo({
						url: "/pages/merchant/merchant?merchantId=" + getApp().globalData.userInfo.merchantIds[0]
					})
				}

			},
			
			toCaht() {
				uni.navigateTo({
					url: "/pages/conversationList/conversationList"
				})
			},
			
			toFocus() {
				uni.navigateTo({
					url: "/pages/focusList/focusList"
				})
			},
			
			toCollect() {
				uni.navigateTo({
					url: "/pages/collection/collection"
				})
			},
			
			toMerchantJoin() {
				uni.navigateTo({
					url: "/pages/merchant/addMerchant/addMerchant"
				})
			},
			toDress() {
				uni.navigateTo({
					url: "/pages/dressingRoom/dressingRoom"
				})
			},
			toOrder() {
				uni.navigateTo({
					url: "/pages/me/order/order"
				})
			},
			toMyAddress() {
				uni.navigateTo({
					url: "/pages/me/address/address"
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: white;
	}

	.cardv {
		padding-inline: 20rpx;
		height: 90rpx;
		background-color: white;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 10rpx;
	}

	.userInforv {
		height: 250rpx;
		background-color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;

		.contentv {
			padding-inline: 20rpx;
			width: 70%;
			height: 110rpx;
		}

	}

	.ucenter-face {
		width: 100rpx !important;
		height: 100rpx !important;
	}

	.ucenter-face-image {
		width: 100rpx !important;
		height: 100rpx !important;
	}

	.ucenter-line {
		height: 12rpx;
		background-color: #F4F5F6;
		margin: 16rpx 0;
	}
</style>